import { createRouter, createWebHistory } from "vue-router";
import axios from "axios";
import store from "../store"
import Home from "../views/Home.vue"
const routes = [
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
  },
  {
    path: "/register",
    name: "Register",
    component: () => import("../views/Register.vue"),
  },
  
  {
    path: "/",
    name: "Home",
    component: Home,
    children: [
      {
        path: "product/:categoryId",
        name: "product",
        props: true,
        component: () => import("../views/Product.vue"),
      },
      {
        path: "item/:productId",
        name: "item",
        props: true,
        component: () => import("../views/Item.vue"),
      },
      {
        path: "/category",
        props: true,
        component: () => import("../views/Category.vue"),
      },
      {
        path: "/allproduct",
        name: "products",
        component: () => import("../views/AllProduct.vue"),
      },
      {
        path: "/allItem",
        name: "items",
        component: () => import("../views/AllItem.vue"),
      },
      {
        path: "/modify",
        name: "modify",
        component: () => import("../views/ModifyAccount.vue"),
      },
      {
        path:"/cart",
        name:"cart",
        component:()=>import("../views/Cart.vue"),
      },
      {
        path:"/paySuccess",
        name:"paySuccess",
        component:()=>import("../views/PaySuccess.vue"),
      },
      {
        path:"/visualzation",
        name:"Visualzation",
        component:()=>import("../views/Visualzation.vue"),
      },
      {

        path:"/addOrder",
        name:"addOrder",
        component:()=>import("../views/AddOrder.vue"),
      },
      {
        path:"/viewOrder",
        name:"viewOrder",
        component:()=>import("../views/ViewOrder.vue"),
      },
      {
        path: "/log",
        name: "log",
        component: () => import("../views/log.vue"),
      },
     /*  {
        path:"/newcart",
        name:"NewCart",
        component:()=>import("../views/NewCart.vue"),
      }, */
      {
        path:"/ItemView",
        name:"ItemView",
        component:()=>import("../views/ItemView.vue"),
      },
      {
        path:"/search",
        name:"Search",
        component:()=>import("../views/Search.vue"),
      },
      {
        path:"/OrderDetail",
        name:"OrderDetail",
        component:()=>import("../views/OrderDetail.vue"),
      },
    ]
  },
];


const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to, from, next) => {
  if(to.path === '/register') return next();
  const getCart = (username) => {
    return axios.get("/account/"+username+"/cart").then(res => {
           console.log(res);
           store.commit("setCart", res.data.data);
           console.log(store.state.shopCart);
    });
  }
  const token = localStorage.getItem('token');
    const isValid = () => {
        return axios.get("/account/", {
            headers: {
                "Authorization": token
            }
        }).then(res => {
            axios.defaults.headers.common['Authorization'] = token;
            store.commit("setUserInfo", res.data);
            return true;
        }).catch(e => {
            console.log(e);
            // console.log("error: ", e)
            return false;
        });
    }
    const status = await isValid();
    console.log(status);
    console.log((!token || !status) && to.path !== '/login');
    if ((!token || !status) && to.path !== '/login') {
        console.log("token not valid")
        next('/login');
        return
    }
    else {
        console.log("else")
        if(store.state.userInfo)
          getCart(store.state.userInfo.username)
        next();
    }
})

export default router;